<template>
    <div style=" font-size: 12px; line-height: 60px;display: flex">
        <div style="flex: 1;">
            <span :class="collapseBtnClass" style="cursor: pointer;font-size: 18px" @click="collapse"></span>


            <div style="display: inline-block;margin-left: 10px">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>{{ currentPathName }}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </div>
        <el-dropdown style="width: 120px; cursor: pointer;">
          <div style="display: inline-block">
            <img :src="user.aventUrl"
                       style="width:30px;position: relative; top: 7px;border-radius: 50%;margin-right: 5px"></img>
            <span>{{user.nickname}}</span><i class="el-icon-arrow-down" style="margin-left: 5px;"></i>

          </div>
            <el-dropdown-menu slot="dropdown" style="width: 100px;margin: 5px">
              <el-dropdown-item style="text-align: center"><router-link to="/person" style="text-decoration: none"> 个人信息</router-link></el-dropdown-item>
                <el-dropdown-item style="text-align: center">
                  <span  style="text-decoration: none;" @click="logout">退出</span>
                </el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>

</template>

<script>
    export default {
        name: "Header",
        props: {
            collapseBtnClass: String,
            collapse: Function,
            user:Object
        },
        computed:{
            currentPathName(){
                return this.$store.state.currentPathName;// 需要监听的数据
            }
        },
        watch: {
            currentPathName(newval,oldval){

            }
        },
        data(){
            return {

            }
        },
      methods:{
        logout(){
          this.$store.commit("logout")
        }
      }
    }
</script>

<style scoped>

</style>